<script setup lang="ts">
definePage({
  name: 'demo-params',
  style: {
    navigationBarTitleText: '参数接收演示',
  },
})

const router = useRouter()
const route = useRoute()

// 接收参数
const receivedParams = ref({})
const decodedUser = ref(null)

onLoad((option) => {
  console.log('onLoad option:', option)
  receivedParams.value = option || {}

  // 如果有user参数，尝试解码对象
  if (option && option.user) {
    try {
      decodedUser.value = JSON.parse(decodeURIComponent(option.user))
    }
    catch (e) {
      console.error('解码user参数失败:', e)
    }
  }
})

function goBack() {
  router.back()
}

function pushToGuard() {
  router.push('/pages/router/demo-guard')
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          📥
        </view>
        <view class="header-title">
          params 参数接收演示
        </view>
        <view class="header-subtitle">
          演示如何接收和处理路由参数
        </view>
      </view>
    </view>

    <!-- 路由信息 -->
    <demo-block title="当前路由信息" transparent>
      <view class="info-card">
        <view class="info-items">
          <view class="info-item">
            <text class="info-label">
              路径:
            </text>
            <text class="info-value">
              {{ route.path }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">
              名称:
            </text>
            <text class="info-value">
              {{ route.name }}
            </text>
          </view>
          <view class="info-item no-border">
            <text class="info-label">
              接收方式:
            </text>
            <text class="info-value-alt">
              onLoad(option)
            </text>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 参数信息 -->
    <demo-block title="接收到的参数" transparent>
      <view class="param-cards">
        <view class="param-card">
          <view class="param-title">
            原始参数 (option)
          </view>
          <view class="code-block">
            <text class="code-text">
              {{ JSON.stringify(receivedParams, null, 2) }}
            </text>
          </view>
        </view>

        <view v-if="decodedUser" class="param-card">
          <view class="param-title">
            解码后的对象参数
          </view>
          <view class="code-block">
            <text class="code-text">
              {{ JSON.stringify(decodedUser, null, 2) }}
            </text>
          </view>
          <view class="param-url">
            使用 JSON.parse(decodeURIComponent(option.user)) 解码
          </view>
        </view>
      </view>
    </demo-block>

    <!-- API 说明 -->
    <demo-block title="API 说明" transparent>
      <view class="explanation-card">
        <view class="explanation-title">
          Params vs Query 的区别
        </view>
        <view class="important-note">
          <view class="note-title">
            ⚠️ 重要说明
          </view>
          <view class="note-content">
            在 uni-mini-router 中，params 和 query 参数在实际效果上并无区别，都会以查询字符串形式放在 URL 中。这种 API
            设计主要是为了与 vue-router 保持一致。
          </view>
        </view>
        <view class="code-block">
          <text class="code-text">
            // Params 写法 (当前演示) router.push({ name: 'demo-params', params: { username: 'eduardo' } }) // 结果:
            /demo-params?username=eduardo // Query 写法 (效果相同) router.push({ path: '/demo-params', query: {
            username: 'eduardo' } }) // 结果: /demo-params?username=eduardo
          </text>
        </view>
      </view>
    </demo-block>

    <!-- 代码示例 -->
    <demo-block title="代码示例" transparent>
      <view class="code-example-card">
        <view class="code-example-title">
          接收参数的标准写法
        </view>
        <view class="code-block">
          <text class="code-text">
            onLoad((option) => { if (option && option.username) { const username = option.username } // 对象参数需要解码
            if (option && option.user) { const user = JSON.parse(decodeURIComponent(option.user)) } })
          </text>
        </view>
      </view>
    </demo-block>

    <!-- 操作按钮 -->
    <demo-block title="继续演示" transparent>
      <view class="button-group">
        <wd-button type="primary" block @click="pushToGuard">
          跳转到导航守卫演示
        </wd-button>
        <wd-button type="warning" block @click="goBack">
          返回上一页
        </wd-button>
      </view>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 24px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 32px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  font-size: 14px;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.info-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
}

.dark .info-card {
  background-color: var(--wot-dark-background2);
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }
}

.dark .info-item {
  border-bottom-color: var(--wot-dark-border);
}

.info-label {
  font-size: 14px;
  color: #666;
}

.dark .info-label {
  color: var(--wot-dark-color2);
}

.info-value {
  font-family: monospace;
  font-size: 14px;
  color: #333;
}

.dark .info-value {
  color: var(--wot-dark-color);
}

.info-value-alt {
  font-size: 14px;
  color: #333;
}

.dark .info-value-alt {
  color: var(--wot-dark-color);
}

.param-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.param-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .param-card {
  background-color: var(--wot-dark-background2);
}

.param-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .param-title {
  color: var(--wot-dark-color);
}

.code-block {
  padding: 12px;
  background-color: #f7fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.dark .code-block {
  background-color: var(--wot-dark-background3);
  border-color: var(--wot-dark-border);
}

.code-text {
  font-family: monospace;
  font-size: 12px;
  color: #4a5568;
  line-height: 1.6;
}

.dark .code-text {
  color: var(--wot-dark-color);
}

.param-url {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}

.dark .param-url {
  color: var(--wot-dark-color2);
}

.explanation-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .explanation-card {
  background-color: var(--wot-dark-background2);
}

.explanation-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .explanation-title {
  color: var(--wot-dark-color);
}

.important-note {
  margin-bottom: 12px;
  padding: 12px;
  background-color: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.2);
  border-radius: 8px;
}

.dark .important-note {
  background-color: rgba(255, 165, 0, 0.2);
}

.note-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #d97706;
}

.dark .note-title {
  color: #f59e0b;
}

.note-content {
  font-size: 12px;
  line-height: 1.6;
  color: #b45309;
}

.dark .note-content {
  color: #fde68a;
}

.code-example-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .code-example-card {
  background-color: var(--wot-dark-background2);
}

.code-example-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .code-example-title {
  color: var(--wot-dark-color);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
